<template>
  <div class="search tabbarhidden">
<div class="bar">
<div class="back" @click="onClickLeft">
  <van-icon size="20" name="arrow-left" />
</div>
<div class="searchbar">
  <SearchTabbar></SearchTabbar>
</div>
<div class="more">
  更多
</div>
</div>
<div class="main">
  <SearchReult :itemdata="searchdata.data?.hotFilters"></SearchReult>
  <SearchItem :itemdata="searchdata.data?.items"></SearchItem>
</div>
  </div>
</template>


<script setup>
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import usesearch from '../../store/moduels/search';
import SearchTabbar from "../../components/tabbar/SearchTabbar.vue"
import SearchReult from '../../components/search/SearchReult.vue';
import SearchItem from "../../components/search/SearchItem.vue"
const searchstore=usesearch()
const {searchdata}=storeToRefs(searchstore)
searchstore.fetchsearch()

const router=useRouter()
const onClickLeft=()=>{
router.back()
}
</script>


<style lang="less" scoped>
.search{
  .bar{
    display: flex;
    width: 100%;
    position: relative;
    .more{
      z-index: 99;
      position: absolute;
      right: 5px;
      font-size: 12px;
      line-height: 45px;
      color: #666;
    }
    .searchbar{
      padding: 0 30px;
    }
    .back{
      z-index: 99;
      // text-align: center;
      line-height: 45px;
      color: #ff9854;
    }
  }
}

</style>